<!doctype html>
<html>
<head>
<meta charset="utf-8">
    <title>入驻申请</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">     
    <meta content="yes" name="apple-mobile-web-app-capable">     
    <meta content="black" name="apple-mobile-web-app-status-bar-style">     
    <meta content="telephone=no" name="format-detection">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" type="text/css" href="/H5/css/sm.min.css" />
    <link rel="stylesheet" type="text/css" href="/H5/css/City.css" />
    <link rel="stylesheet" type="text/css" href="/H5/css/reset.css?v=1" />
</head>               
<body>
	<div class="page-group ms-controller" :controller="application">
        <div class="page page-current" style="background: #efeff4">
            <header class="bar bar-nav">
              	<a class="icon icon-left pull-left" href="javascript:window.history.go(-1);"></a>
              	<a class="icon icon-home pull-right" href="/H5"></a>
              	<h1 class="title">入驻申请</h1>
            </header>
            <div class="content visibility">
            	<div class="content-block-title title01">温馨提示：入驻类型选择个人时，公司名称请填写为个人！</div>
            	<!-- <div class="content-block-title title01">带 * 号内容一经商家成功入驻不可更改！</div> -->
            	  	<div class="list-block" style="margin:0">
	            	    <ul class="block-ul">
	            	        <li>
	            	        	<div class="item-content">
	            	          		<div class="item-inner">
	            	            		<div class="item-title label">入驻类型</div>
	            	            		<div class="item-input">
	            	                		<input type="text"  id="type" readonly placeholder="请选择入驻类型">
	            	                		<input type="hidden" :duplex="type" id="typeValue" readonly>
	            	            		</div>
	            	          		</div>
	            	        	</div>
	            	      	</li>
	            	    
	            	      	<li>
	            	        	<div class="item-content">
	            	          		<div class="item-inner">
	            	            		<div class="item-title label"><span style="color:red; margin-right:2%;"></span>联系人</div>
	            	            		<div class="item-input">
	            	              			<input type="text" :attr="{'readonly': @status_only?true:false}" :duplex="username" placeholder="请填写联系人姓名">
	            	            		</div>
	            	          		</div>
	            	        	</div>
	            	      	</li>
	            	      	<!-- <li>
	            	        	<div class="item-content">
	            	          		<div class="item-inner">
	            	            		<div class="item-title label">会员性别</div>
	            	            		<div class="item-input">
	            	                		<input type="text" id="sex" readonly placeholder="请选择会员性别">
	            	                		<input type="hidden" :duplex="sex" id="sexValue" readonly>
	            	            		</div>
	            	          		</div>
	            	        	</div>
	            	      	</li> -->
		            	    
		            	    <li>
		            	        <div class="item-content">
			            	        <div class="item-inner">
			            	            <div class="item-title label"><span style="color:red; margin-right:2%;"></span>联系电话</div>
			            	            <div class="item-input">
			            	                <input type="number" :attr="{'readonly': @status_only?true:false}"  :duplex="mobile" id="mobile" name="mobile" placeholder="请填写联系电话"/>
			            	            </div>
			            	        </div>
		            	        </div>
		            	    </li>
		            	    <li>
		            	        <div class="item-content">
			            	        <div class="item-inner">
			            	            <div class="item-title label"><span style="color:red; margin-right:2%;"></span>公司名称</div>
			            	            <div class="item-input">
			            	              <input type="text" :attr="{'readonly': @status_only?true:false}" :duplex="company" placeholder="请填写公司名称">
			            	            </div>
			            	        </div>
		            	        </div>
		            	    </li>
		            	    
		            	    <li>
	            	        	<div class="item-content">
	            	          		<div class="item-inner">
	            	            		<div class="item-title label">入驻性质</div>
	            	            		<div class="item-input">
	            	                		<input type="text"  id="nature" readonly placeholder="请选择入驻性质">
	            	                		<input type="hidden" :duplex="nature" id="natureValue" readonly>
	            	            		</div>
	            	          		</div>
	            	        	</div>
	            	      	</li>
	            	      	
	            	      	 <li>
	            	        	<div class="item-content">
	            	          		<div class="item-inner">
	            	            		<div class="item-title label">入驻方式</div>
	            	            		<div class="item-input">
	            	                		<input type="text" id="mode" readonly placeholder="请选择入驻方式">
	            	                		<input type="hidden" :duplex="mode" id="modeValue" readonly>
	            	            		</div>
	            	          		</div>
	            	        	</div>
	            	      	</li>
	            	      	
	            	      	<li>
		            	        <div class="item-content">
			            	        <div class="item-inner">
			            	            <div class="item-title label">预约最佳时间</div>
			            	            <div class="item-input">
			            	            	<input type="text"  id="datetime" :duplex="make_time" readonly placeholder="请选择您预约最佳时间">
			            	            </div>
			            	        </div>
		            	        </div>
		            	    </li>
		            	    
		            	     <li>
	            	        	<div class="item-content">
	            	          		<div class="item-inner">
	            	            		<div class="item-title label">申请进度</div>
	            	            		<div class="item-input">
	            	                		<input type="text" id="status_label" :duplex="status_label" name="status_label" readonly>
	            	                		
	            	            		</div>
	            	          		</div>
	            	        	</div>
	            	      	</li>
		            	    <!-- <li>
		            	        <div class="item-content">
			            	        <div class="item-inner">
			            	            <div class="item-title label"><span style="color:red; margin-right:2%;"></span>所在地区</div>
			            	            <div class="item-input">
			            	            	<input type="text" id="picker" readonly placeholder="请选择地区">
			            	            	<input type="hidden" :duplex="area" id="value">
			            	            </div>
			            	        </div>
		            	        </div>
		            	    </li>
		            	    <li>
		            	        <div class="item-content">
			            	        <div class="item-inner">
			            	            <div class="item-title label"><span style="color:red; margin-right:2%;"></span>详细地址</div>
			            	            <div class="item-input">
			            	              <input type="text" :attr="{'readonly': @address_only?true:false}" :duplex="address" placeholder="请填写详细地址">
			            	            </div>
			            	        </div>
		            	        </div>
		            	    </li> -->
		            	    
		            	    
	            	  	</ul>    
		            	<div class="content-block">
			            	<div class="row">
			            	      	<div class="col-50" style="width:95%;"><a href="javascript:;" :on-click="@submit" class="button button-big button-fill button-danger">确认并提交</a></div>
			            	</div>
		            	</div>
	            	</div>
            	</div>
            </div>
        </div>
    </div>
<script type='text/javascript' src='/H5/js/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/avalon.js' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/simpleStorage.js' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/mall.js?v=10' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/City.js' charset='utf-8'></script>
<script>
	var application = avalon.define({
		$id: "application",
		username: "",
		mobile: "",
		company: "",
		make_time: "",
		type: "",
		nature: "",
		mode: "",
		status_label:"",
		status:"",
		status_only: false,
		//sex: "1",
		//dateTime: "",
		
		
		//area: "",
		//address: "",
		//address_only: false,
		
		info: {},
		getInfo: function(){
			Mall.request( "/api/ApplicationData" )
				.always( function( data ){
					if( data.error_code == 0 ){
					    application.info = data.data;
				    	application.username = data.data.username?data.data.username:'';
				    	application.mobile = data.data.mobile?data.data.mobile:'';
				    	application.company = data.data.company?data.data.company:'';
				    	application.status_label = data.data.status_label?data.data.status_label:'未申请';
					    $("#datetime").calendar();
					    data.data.status == 2 && ( application.status_only = false );
					    data.data.type && ( application.type = data.data.type );
					    data.data.type_label && $( "#type" ).val( data.data.type_label );
					    data.data.make_time && $( "#datetime" ).val( data.data.make_time );
					    $("#type").picker({
					      	toolbarTemplate: '<header class="bar bar-nav">\
					      		<button class="button button-link pull-right close-picker">确定</button>\
					      		<h1 class="title">请选择入驻类型</h1>\
					      		</header>',
					      	cols: [{textAlign: 'center',values: ['0', '1'],displayValues: ["个人","企业"]}],
					      	formatValue: function( e, v ,dv ){
					      		$( "#typeValue" ).val( v )
					      		return dv
					      	}
					    });
					    data.data.nature && ( application.nature = data.data.nature );
					    data.data.nature_label && $( "#nature" ).val( data.data.nature_label );

					    $("#nature").picker({
					      	toolbarTemplate: '<header class="bar bar-nav">\
					      		<button class="button button-link pull-right close-picker">确定</button>\
					      		<h1 class="title">请选择入驻性质</h1>\
					      		</header>',
					      	cols: [{textAlign: 'center',values: ['0', '1'],displayValues: ["产品代销","公司直营"]}],
					      	formatValue: function( e, v ,dv ){
					      		$( "#natureValue" ).val( v )
					      		return dv
					      	}
					    });
					    data.data.mode && ( application.mode = data.data.mode );
					    data.data.mode_label && $( "#mode" ).val( data.data.mode_label );
					    $("#mode").picker({
					      	toolbarTemplate: '<header class="bar bar-nav">\
					      		<button class="button button-link pull-right close-picker">确定</button>\
					      		<h1 class="title">请选择入驻方式</h1>\
					      		</header>',
					      	cols: [{textAlign: 'center',values: ['0', '1'],displayValues: ["推荐产品","自卖产品"]}],
					      	formatValue: function( e, v ,dv ){
					      		$( "#modeValue" ).val( v )
					      		return dv
					      	}
					    });
                        $( ".content" ).removeClass( "visibility" );
					}
				} )
		},
		getCity: function(){
		    Mall.request("/api/AreaDict")
		        .always( function( data ){
		            if( data.error_code == 0 ){
		                var area = new LArea();
		                area.init({
		                    'trigger': '#picker', //触发选择控件的文本框，同时选择完毕后name属性输出到该位置
		                    'valueTo': '#value', //选择完毕后id属性输出到该位置
		                    'keys': {
		                        id: 'id',
		                        name: 'name'
		                    }, //绑定数据源相关字段 id对应valueTo的value属性输出 name对应trigger的value属性输出
		                    'type': 1, //数据源类型
		                    'data': data.data //数据源
		                });
		            }
		        } )
		},
		
		submit: function(){
			if( Mall.LOCK ){
				return
			}
			
			Mall.LOCK = true;
			var postData = {
			}
			application.type && ( postData.type = application.type );
			application.username && ( postData.username = application.username );
			application.mobile && ( postData.mobile = application.mobile );
			application.company && ( postData.company = application.company );
			application.nature && ( postData.nature = application.nature );
			application.mode && ( postData.mode = application.mode );
			application.make_time && ( postData.make_time = application.make_time );
			
			Mall.request( "/api/Application", postData )
				.always( function( data ){
					if( data.error_code == 0 ){
					    $.toast( "商家入驻申请提交成功", 1000, "success", function(){
					        window.location.href="/H5/member";
					    } )
					}
					Mall.LOCK = false;
				} )
		},
		upload: function(){
		    var formData = new FormData();
		    formData.append('kcs_uploader_file', $('#file')[0].files[0]);
		    formData.append('api_token', simpleStorage.get( "token" ));
		    $.ajax({
                url : ( simpleStorage.get( "host" ) || "http://"+location.hostname ) + '/api/Upload',//这里写你的url
                type : 'POST',
                data : formData,
                contentType: false,// 当有文件要上传时，此项是必须的，否则后台无法识别文件流的起始位置
                processData: false,// 是否序列化data属性，默认true(注意：false时type必须是post)
                dataType: 'json',//这里是返回类型，一般是json,text等
                clearForm: true,//提交后是否清空表单数据
                success: function(data) {   //提交成功后自动执行的处理函数，参数data就是服务器返回的数据。
                    application.avatarUrl = data.data.avatar_url;
                },
                error: function(data, status, e) {  //提交失败自动执行的处理函数。
                    $.alert(e);
                }
            });
		},
	})
	application.getInfo();
	avalon.scan( document.body )
</script>
</body>
</html>
